import React, { useState, useEffect } from "react";
import styles from "./index.module.less";
// 花瓣飘落特效
import { init } from "@depjs/sakura";
import defaultHead from "@images/head/2.jpeg";
import { useNavigate } from "react-router-dom";
import { request } from "@apis/request";
import toast from "@utils/showToast";
import { removeLocal, removeSession } from "@depjs/storage";
import { connect } from "react-redux";
import { selectItemNameShowChatHead } from "@redux/actions02";

const Main = (props) => {
    const { selectItemNameShowChatHead } = props;

    const navigate = useNavigate();

    const [userNums, setUserNums] = useState(null);
    const [myInfo, setMyInfo] = useState({});

    const quit = async () => {
        const res = await request("/logout", {}, "post");

        if (res.code === "0000") {
            toast.success("退出成功");
            removeLocal();
            removeSession();
            navigate("/login", { replace: true });
        }
    };

    useEffect(() => {
        init({
            id: "sakura",
            numbers: 30,
        });
    }, []);

    useEffect(() => {
        const getTotalUserNumbers = async () => {
            try {
                const res = await request("/totalUserNumbers");

                if (res.code === "0000") {
                    setUserNums(res.data);
                }
            } catch (err) {
                console.log("err: ", err);
            }
        };

        getTotalUserNumbers();
    }, []);

    useEffect(() => {
        const getMyInfo = async () => {
            const res = await request("/myInfo");
            if (res.code === "0000") {
                setMyInfo(res.data);
            }
        };
        getMyInfo();
    }, []);

    return (
        <div className={styles.main}>
            <div id="sakura" className={styles.sakura}></div>
            <div className={styles.circle_wrap}>
                <div className={styles.circle_main}>
                    <div className={styles.my_page}>
                        <div className={styles.my_head}>
                            <img
                                src={
                                    myInfo.avatarUrl
                                        ? require(`@images/head/${myInfo.avatarUrl}`)
                                        : defaultHead
                                }
                                alt=""
                            />
                        </div>
                        <p className={styles.p1}>我的主页</p>
                    </div>
                    <div
                        className={styles.todo}
                        onClick={() => {
                            navigate("/calendar");
                        }}
                    >
                        台历任务表
                    </div>
                    <div
                        className={styles.games}
                        onClick={() => {
                            navigate("/games");
                        }}
                    >
                        轻松游戏
                    </div>
                    <div
                        className={styles.message_board}
                        onClick={() => {
                            navigate("/messageBoard");
                        }}
                    >
                        留言板
                    </div>
                    <div
                        className={styles.web_chat}
                        onClick={() => {
                            navigate("/web-chat/chat/mask");
                            selectItemNameShowChatHead("");
                        }}
                    >
                        歪比叭卜
                    </div>
                    <div className={styles.buy_page}>自由购</div>
                </div>
            </div>
            <div className={styles.quit} title="退出登录" onClick={quit}></div>
            {userNums ? (
                <div className={styles.user_nums}>
                    当前已有<span>{userNums}</span>位小伙伴在使用该网站啦~
                    <div className={styles.mua_gif}></div>
                </div>
            ) : null}
        </div>
    );
};

export default connect((state) => state, { selectItemNameShowChatHead })(Main);
